<template>
  <n-message-provider>
    <message-api></message-api>
  </n-message-provider>
  <n-form ref="formRef" :model="model" :rules="rules">
    <n-form-item path="age" label="年龄">
      <n-input v-model:value="model.age" @keydown.enter.prevent />
    </n-form-item>
    <n-form-item path="password" label="密码">
      <n-input
        v-model:value="model.password"
        type="password"
        @input="handlePasswordInput"
        @keydown.enter.prevent
      />
    </n-form-item>
    <n-form-item
      ref="rPasswordFormItemRef"
      first
      path="reenteredPassword"
      label="重复密码"
    >
      <n-input
        v-model:value="model.reenteredPassword"
        :disabled="!model.password"
        type="password"
        @keydown.enter.prevent
      />
    </n-form-item>
    <n-row :gutter="[0, 24]">
      <n-col :span="24">
        <div style="display: flex; justify-content: flex-end">
          <n-button
            :disabled="model.age === null"
            round
            type="primary"
            @click="handleValidateButtonClick"
          >
            验证
          </n-button>
        </div>
      </n-col>
    </n-row>
  </n-form>
  <pre
    >{{ JSON.stringify(model, null, 2) }}
</pre
  >
</template>
<script setup lang="ts" name="login">
  import { ref } from 'vue'

  const formRef = ref(null)
  const rPasswordFormItemRef = ref(null)
  const model = ref({
    age: null,
    password: null,
    reenteredPassword: null,
  })
  function validatePasswordStartWith(rule: any, value: string | any[]) {
    return (
      !!model.value.password &&
      // @ts-ignore
      model.value.password.startsWith(value) &&
      // @ts-ignore
      model.value.password.length >= value.length
    )
  }
  function validatePasswordSame(rule: any, value: null) {
    return value === model.value.password
  }
  const rules = {
    age: [
      {
        required: true,
        validator(rule: any, value: string) {
          if (!value) {
            return new Error('需要年龄')
          }
          if (!/^\d*$/.test(value)) {
            return new Error('年龄应该为整数')
          }
          if (Number(value) < 18) {
            return new Error('年龄应该超过十八岁')
          }
          return true
        },
        trigger: ['input', 'blur'],
      },
    ],
    password: [
      {
        required: true,
        message: '请输入密码',
      },
    ],
    reenteredPassword: [
      {
        required: true,
        message: '请再次输入密码',
        trigger: ['input', 'blur'],
      },
      {
        validator: validatePasswordStartWith,
        message: '两次密码输入不一致',
        trigger: 'input',
      },
      {
        validator: validatePasswordSame,
        message: '两次密码输入不一致',
        trigger: ['blur', 'password-input'],
      },
    ],
  }
  const handlePasswordInput = () => {
    if (model.value.reenteredPassword) {
      // @ts-ignore
      rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
    }
  }
  const handleValidateButtonClick = () => {
    // @ts-ignore
    formRef.value?.validate((errors: any) => {
      if (!errors) {
        // @ts-ignore
        window.$message.success('验证成功')
      } else {
        console.log(errors)
        // @ts-ignore
        window.$message.success('验证失败')
      }
    })
  }
</script>
